<template>
  <div v-if="bookinfo">
    <div class="topb">
      <span
        class="iconfont icon-arrowRight-copy-copy"
        @click="$router.go(-1)"
      ></span>
      <div class="topbtext">
        <span>
          <van-cell class="iconfont icon-sandian" @click="showShare = true" />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </span>
      </div>
    </div>

    <div class="bookxq">
      <img :src="xqimg" v-lazy="xqimg" />
      <p class="booknameb">{{ bookinfo.title }}</p>
      <p class="acter">
        <span>{{ bookinfo.author.name }}</span> | 连载中 .
        {{ bookinfo["pris:book"].words | playCountData }}字
      </p>
    </div>

    <div class="xqbox">
      <ul>
        <li>
          <span>{{ bookinfo["pris:ranking"].value }}</span>
          <span class="b">分</span>
          <p>
            {{ bookinfo["pris:assess"].times }}人点评
            <span class="iconfont icon-youjiantou"></span>
          </p>
        </li>

        <li>
          <span>{{ bookinfo["pris:subscribe"].times | playCountDataA }}</span>
          <span class="b">万人</span>
          <p>正在阅读</p>
        </li>

        <li>
          <span>{{
            bookinfo["pris:subscribe"].clicksCount | playCountDataA
          }}</span>
          <span class="b">万人</span>
          <p>点击<span class="iconfont icon-youjiantou"></span></p>
        </li>
      </ul>
    </div>

    <div class="bookbrief">
      <span class="bookj">简介</span>
      <ul>
        <li>{{ bookinfo["pris:book"].category }}</li>
        <li>{{ bookinfo["pris:book"].paydesc }}</li>
        <li>{{ bookinfo["pris:book"].category }}</li>
      </ul>
    </div>

    <div class="booktext">
      <p>
        {{ bookinfo.summary }}
      </p>
    </div>

    <div class="footer">
      <span @click="add(xqid)" v-if="addShow">加入书架</span>
      <span @click="del(xqid)" v-if="!addShow">移除书架</span>
      <span
        @click="
          $router.push({
            name: 'bookpages',
            query: { id: xqid, firsrid: zjid1 },
          })
        "
        >立即阅读</span
      >
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";
import { bookInfo, readerInfo } from "../../api/res";
export default {
  data() {
    return {
      bookinfo: "",
      xqimg: "",
      xqid: "",
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      zjid1: "",
      addShow: true,
    };
  },
  methods: {
    ...mapActions({ addBookList: "addBookList", deLBookList: "deLBookList" }),
    add(id) {
      this.addBookList({ id, cover: this.xqimg });
      Toast("加入成功");
      this.addShow = false;
    },
    del(id) {
      this.deLBookList(id);
      Toast("移除成功");
      this.addShow = true;
    },

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    addshort() {
      const addData = {
        // name:"addname",
        id: this.$route.query.id,
        bookname: this.bookinfo.title,
        img: this.xqimg,
        shelfsped: "",
        shelfupdata: this.bookinfo.updated,
      };
      console.log(addData);
      localStorage.setItem("addname", JSON.stringify(addData));
    },
  },

  computed: {
    ...mapState({ bookList: "bookList" }),
  },

  created() {
    bookInfo({ id: this.$route.query.id }).then((data) => {
      console.log(data.feed.entry);
      console.log(this.$route.query.id);
      this.bookinfo = data.feed.entry;
    });
    readerInfo({ source_uuid: this.$route.query.id }).then((data) => {
      console.log(data);
      this.zjid1 = data.data.catalog[1].secId;
      console.log(this.zjid1);
    });
    this.xqimg = this.$route.query.cover;
    this.xqid = this.$route.query.id;
    // console.log(this.xqimg);

    // this.addShow =
    //   this.bookList.findIndex((ele) => ele.id == this.bookid) == -1
    //     ? true
    //     : false;
    this.addShow =
      this.bookList.findIndex((ele) => ele.id == this.xqid) == -1
        ? true
        : false;
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
    playCountDataA(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) : parseInt(w); //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.topb {
  height: 50px;
  border-bottom: 1px solid #e1e1e2;
  display: flex;
  justify-content: space-between;
  .icon-arrowRight-copy-copy {
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 10px;
  }
  .topbtext {
    width: 250px;
    //   border: 1px solid black;
    // display: flex;
    // justify-content: space-between;
    line-height: 50px;
    .icon-sandian {
      // margin-right: 20px;
      font-size: 20px;
      margin-left: 195px;
    }
  }
}

.bookxq {
  // border: 1px solid black;
  padding-bottom: 10px;
  background-color: #eff1f3;
  img {
    width: 100px;
    height: 140px;
    margin: auto;
    // margin-top: 10px;
    padding-top: 10px;
  }
  .booknameb {
    width: 180px;
    // border: 1px solid black;
    font-size: 25px;
    margin: auto;
    margin-top: 10px;
    text-align: center;
  }
  .acter {
    width: 220px;
    // border: 1px solid black;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    span {
      color: #71a4d6;
    }
  }
}
.xqbox {
  // border: 1px solid black;
  ul {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    li {
      // border: 1px solid black;
      span {
        font-size: 17px;
        font-weight: bold;
      }
      .b {
        font-size: 13px;
        font-weight: normal;
      }
      p {
        font-size: 13px;
        color: #80809c;
        span {
          font-size: 13px;
        }
      }
    }
  }
}
.bookbrief {
  // border: 1px solid black;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  .bookj {
    // border: 1px solid black;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
  }
  ul {
    width: 250px;
    // border: 1px solid black;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    // margin-left: -20px;
    li {
      // border: 1px solid black;
      background-color: #eff1f3;
      width: 75px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 20px;
      font-size: 15px;
    }
  }
}
.booktext {
  //   border: 1px solid black;
  margin-top: 10px;
  // padding-bottom: 60px;
  p {
    width: 325px;
    // border: 1px solid black;
    margin: auto;
    color: #80809c;
    empty-cells: show;
    text-indent: 2em;
    font-size: 15px;
  }
}
.footer {
  width: 100%;
  height: 55px;
  border-top: 1px solid gainsboro;
  background: white;
  bottom: 0px;
  left: 0px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  span{
    width: 200px;
    text-align: center;
    line-height: 55px;
    border-right: 1px solid gainsboro;
  }
  span:last-child{
    border-right:none;
  }
}
</style>